<!--
 * @Description: 工位ok、ng数量
 * @Author: lwx
 * @Date: 2022-06-16 16:54:57
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-12 09:37:13
-->
<template>
      <div class="d-flex">
         <div class="flex-1 d-flex" v-for="(station, index) in stationList" :key="index">
            <device-chart :id="`device${index}`" :cdata="station" />
            <div class="station_info">
               <div>
                  <div class="mb-2">
                     <div class="gray mb-1">合格数</div>
                     <div class="number">{{ station.production }}</div>
                  </div>
                  <div class="mb-2">
                     <div class="gray mb-1">返修数</div>
                     <div class="number">{{ station.ng }}</div>
                  </div>
               </div>
            </div>
         </div>
      </div>
</template>

<script>
import DeviceChart from '@/components/echart/deviceChart'
import { timerMixins } from '@/common/mixins/timerMixins.js'
import { stationInfo } from '@/api/dashboard.js'
export default {
   mixins: [timerMixins],
   components: {
      DeviceChart
   },
   data() {
      return {
         stationList: []
      }
   },
   methods: {
      async initData() {
         const { data } = await stationInfo()
         data.forEach(item => {
            item.good = item.good.substr(0, item.good.length - 1)
         });
         this.stationList = data
      }
   },
}

</script>
<style lang='scss' scoped>
.station_info {
   display: flex;
   align-items: center;
   color: #68d8fe;
   font-size: .2375rem;
   .number {
      text-align: center;
      font-family: 'electronicFont';
      font-weight: 600;
      font-size: .4rem;
      color: #01fff6;
      background-image: linear-gradient(to top, #072468, #030a37);
   }
}
/deep/.el-carousel__container {
   height: 100%;
}</style>